<template>
  <div>
    <def-layout type="col0-24" :page="page" @invoke="invoke">
      <div slot="search" class="form-items">
        <!-- <el-form-item>
          <el-input v-model="formSearch.keyword" placeholder="运单号" />
        </el-form-item>
        <el-form-item>
          <el-select v-model="formSearch.logisticsOrderStatus" placeholder="请选择状态">
            <el-option
              v-for="item in constants.logisticsOrderStatus.values()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item>
          <el-select v-model="formSearch.originType" placeholder="请选择来源类型">
            <el-option
              v-for="item in constants.originType.values()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>-->
        <el-form-item>
          <el-select v-model="formSearch.creatorId" placeholder="请选择车源类型">
            <el-option
              v-for="item in constants.carSource.values()"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="formSearch.locationId" class="weituof">
          <form-remote-select
            v-model="formSearch.locationId"
            size="mini"
            :url="$http.conf.api.get('wms').url+'/api/logistics/location/map'"
            :rules="self.page.rules.def"
            placeholder="请选择委托方"
          />
        </el-form-item>

        <el-form-item>
          <el-date-picker
            v-model="formSearch.createTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="创建开始日期"
            end-placeholder="创建结束日期"
            value-format="yyyy-MM-dd"
            :picker-options="$constants.pickerOptions"
          />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formSearch.pageNo" placeholder="纸厂单号" />
        </el-form-item>
      </div>
      <div slot="content" class="grid">
        <page-grid v-if="self!=null" :parent="self">
          <div slot="columns">
            <el-table-column prop="no" align="center" label="运单号" width="150" />
            <el-table-column prop="pageNo" align="center" label="纸厂单号" width="150" />
            <el-table-column prop="startArea" align="center" label="发货地" width="150" />
            <el-table-column prop="endArea" align="center" label="目的地" width="180" />
            <el-table-column prop="locationName" align="center" label="委托方" width="180" />
            <el-table-column prop="lineType" align="center" label="运输类型" width="100">
              <template slot-scope="scope">
                <column-filter v-model="scope.row.lineType" type="lineType" @click="filter" />
              </template>
            </el-table-column>
            <el-table-column prop="creatorId" align="center" label="车源" width="100">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.creatorId != constants.otherCarId">自营车</el-tag>
                <el-tag v-else type="warning">外调车</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="originType" align="center" label="来源类型" width="100">
              <template slot-scope="scope">
                <column-filter v-model="scope.row.originType" type="originType" @click="filter" />
              </template>
            </el-table-column>
            <el-table-column prop="expensesExists" align="center" label="是否已创建支出单" width="150">
              <template slot-scope="scope">
                <column-filter v-model="scope.row.expensesExists" type="expensesExists" />
              </template>
            </el-table-column>
            <el-table-column prop="creator" align="center" label="创建人" width="150" />
            <el-table-column prop="status" align="center" label="运作状态" width="150">
              <template slot-scope="scope">
                <column-filter v-model="scope.row.status" type="logisticsOrderStatus" @click="filter" />
              </template>
            </el-table-column>

            <el-table-column prop="createTime" sortable align="center" label="创建时间" width="150" />
            <el-table-column prop="updateTime" sortable align="center" label="更新时间" width="150" />
          </div>
        </page-grid>
      </div>
    </def-layout>
  </div>
</template>
<script>
import adminSupport from 'lola-admin-support-el'
export default {
  name: 'Settlement',
  components: {},
  mixins: [adminSupport.mixins.index],
  data() {
    return {
      name: 'Settlement',
      formSearch: { keyword: '', locked: '', createTime: [], logisticsOrderStatus: null, pageNo: '' },
      self: null
    }
  },
  watch: {

  },
  created() {
    this.init() // 页面自定义初始化
    const that = this
    const status = that.$route.params.status
    console.log('路由参数status = ' + status)
    if (status !== undefined) {
      const map = that.$constants.logisticsOrderStatus.values()
      // console.log(map.get('value'))
      const arr = [...map]
      arr.forEach(val => {
        if (val.value === parseInt(status)) {
          that.formSearch.logisticsOrderStatus = val.value
        }
      })
      setTimeout(() => {
        that.search()
      }, 1500)
    }
  },
  methods: {
    init() {
      var that = this
      this.page.excelParams = {
        fileds: ['shipmentsTime', 'pageNo', 'customer', 'transportTotal', 'price', 'carType', 'carNo', 'actualAmount'],
        queryParam: this.dataGrid.params,
        size: 10000
      }
      that.loadData() // 加载数据(按钮+列表) 扩展需重写该方法
      this.self = that
    },
    search() {
      const queryList = []
      if (!String.isNullOrEmpty(this.formSearch.creatorId)) {
        queryList.push({
          key: 'o.creatorId',
          value: this.$constants.otherCarId,
          oper: this.formSearch.creatorId === 'w' ? '=' : '!=',
          join: 'and'
        })
      }
      if (
        !String.isNullOrEmpty(this.formSearch.locationId)
      ) {
        queryList.push({
          key: 'o.locationInfoId',
          value: this.formSearch.locationId,
          oper: '=',
          join: 'and'
        })
      }
      if (this.formSearch.createTime !== null && this.formSearch.createTime.length > 0) {
        queryList.push({ 'key': 'o.createTime', 'value': this.formSearch.createTime[0], 'oper': '>=', 'join': 'and' })
        queryList.push({ 'key': 'o.createTime', 'value': this.formSearch.createTime[1], 'oper': '<=', 'join': 'and' })
      }
      if (!String.isNullOrEmpty(this.formSearch.pageNo)) {
        queryList.push({
          key: 'o.pageNo',
          value: this.formSearch.pageNo,
          oper: '=',
          join: 'and'
        })
      }

      this.dataGrid.params.queryList = queryList
      this.refresh()
    },
    bindSearch() {
      this.formSearch = { keyword: '', originType: '', createTime: [], logisticsOrderStatus: null }
    },
    // 重写按钮方法
    buildOtherBtn(item, btn) {
      switch (item.code) {
        case 'm5181':
          btn.type = 'info'
          btn.opt = 'batchSettlement'
          break
      }
    },
    // 批量结算
    batchSettlement() {
      const that = this
      const url = that.$http.conf.api.get('wms').url + '/api/logistics/order/batch/complete?idList=' + that.page.ids
      const params = { idList: that.page.ids }
      this.$confirm('确定批量结算这些运输单?', '提示', {
        type: 'warning'
      }).then(() => {
        const loading = that.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.5)'
        })
        that.$http.post(url, params).then(function(rsp) {
          if (rsp.code === 200) {
            that.$message.success('操作成功!')
            that.search()
          } else {
            that.$message.error(rsp.message)
          }
          loading.close()
        }).catch(() => {
          loading.close()
        })
      })
    }

  }
}
</script>
